/*
 * @Author: 
 * @Date: 2022-01-25 17:32:52
 * @LastEditors: lqj
 * @LastEditTime: 2022-02-17 14:20:30
 * @Description: 请填写简介
 */
import React, { Component } from 'react'
import {
  //  Link,
  //  NavLink,
  // BrowserRouter,
  // HashRouter,
  Route,
  Switch,
  // Redirect
  // Routes,
  // Outlet
} from 'react-router-dom'
import { routeList } from './api/routeList'

import HeaderBar from './components/Header/Header'
import MyNavLink from './components/MyNavLink'
export default class App extends Component {
  componentDidMount() {
  }
  render() {
    return (
      <>
        <HeaderBar />
        <div className="">
          <div className="ml5 mt5 mb5 mr5">
            <h4 className='pl20'>Component</h4>
            <hr />
            <div className="list-group flex-row flex-warp">
              {
                routeList.map(it => {
                  if (it.isLink) {
                    return <MyNavLink key={it.id} to={it.path} exact={it.exact}>{it.name}</MyNavLink>
                  }
                })
              }
            </div>
            <hr />
          </div>
          <div className="">
            <h4 className='pl20'>Container</h4>
            <hr />
            <div className="mb20">
              <div className="panel-body">
                <Switch>
                  {
                    routeList.map(it => {
                      if (it.isLink) {
                        return <Route key={it.id} path={it.path} exact={it.exact} component={it.component} />
                      }
                    })
                  }
                  {/* <Route exact path='/'><Hello /></Route> */}
                  {/* <Route path='/path' children={<Component />}></Route> */}
                  {/* 重定向路由 */}
                  {/* <Redirect to='/'></Redirect> */}
                  {/* 通配符 */}
                  {/* <Route path='*' component={ErrorPage}></Route> */}
                </Switch>
              </div>
            </div>
          </div>
        </div>
      </>
    )
  }
}
